﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="stylesheet" href="/css/amazeui.min.css" />
    <style>
        ::-webkit-scrollbar {
            width: 8px; /*宽度对垂直滚动条有效*/
            height: 8px; /*高度对水平滚动条有效*/
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 8px;
            background-color: #efefef;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #aaa;
        }


        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            background-color: #f5e1ba;
        }

        .pageBox {
            padding-left: 250px;
            position: relative;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }

        .nav {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            overflow-y: auto;
            border-right: 1px solid #ddd;
            background-color: #2a2a2a;
            color: #999;
            font-size: 14px;
            line-height: 25px;
            z-index: 9;
        }

            .nav::-webkit-scrollbar {
                width: 5px; /*宽度对垂直滚动条有效*/
                background-color: #F5F5F5;
            }

            .nav::-webkit-scrollbar-thumb {
                border-radius: 5px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: green;
            }


        .nav-menu a {
            display: block;
            color: #fff;
            padding: 10px 15px;
            color: #999;
            transition: background-color linear 0.3s;
        }

            .nav-menu a:hover {
                background-color: #f49484;
                color: #fff;
            }

        .nav .home {
            background-color: #e78170;
            color: #fff;
        }

        .nav-user {
            position: absolute;
            bottom: 5px;
            width: 100%;
        }

            .nav-user a {
                display: block;
                padding: 10px 15px;
                color: #999;
            }

                .nav-user a:hover {
                    color: #fff;
                }

        .nav .icon {
            font-size: 18px;
        }

        .user-history li > a {
            color: #999;
            background-color: transparent;
            padding: 6px;
            font-size: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .user-history li > a:hover {
                color: #fff;
            }

        .user-history li {
            background-color: transparent;
            border-color: #555;
        }

        .user-history h3 {
            padding: 10px 15px;
            margin: 0;
        }

        .user-history .am-list {
            padding-left: 20px;
            margin-top: 0;
        }

        .ContentBox {
            height: 100%;
            overflow-y: auto;
        }

        #chapterBox {
            width: 900px;
            margin: 20px auto;
        }

        .ContentBox .chapter {
            background-color: #fff2d9;
            margin: 20px auto;
            padding: 20px;
            font-size: 16px;
        }

        .ContentBox .chapterTitle {
            font-size: 18px;
        }

        #loading {
            margin: 20px auto;
            font-size: 32px;
            display: none;
        }

        .pagetotop {
            position: fixed;
            right: 50px;
            bottom: 50px;
            z-index: 999;
            display: none;
            color: #fff;
            background-color: rgba(0,0,0,0.6);
        }

        @media (max-width: 640px) {
            #chapterBox {
                width: auto;
            }

            .nav {
                left: -251px;
                transition: left linear 0.5s;
            }

            .pageBox {
                padding-left: 0;
            }

            .ContentBox {
                padding-left: 15px;
                padding-right: 15px;
                height: auto;
            }

            body.active {
                overflow: hidden;
            }

                body.active .nav {
                    left: 0px;
                    position: fixed;
                    border: none;
                }

                body.active .btnMenu {
                    color: #fff;
                    border-color: #fff;
                }

                    body.active .btnMenu .am-icon-home:before {
                        content: "\f00d";
                    }

                body.active::after {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    left: 0;
                    background-color: rgba(0,0,0,0.5);
                    z-index: 2;
                }

            .bookItem {
                height: 80px;
            }

                .bookItem .bookName {
                    height: 80px;
                    line-height: 80px;
                    font-size: 24px;
                }
        }

        .btnMenu {
            position: fixed;
            top: 15px;
            right: 15px;
            z-index: 999;
            font-size: 24px;
            border: 2px solid #333;
            color: #333;
            width: 45px;
            height: 45px;
            line-height: 38px;
            border-radius: 50%;
            text-align: center;
        }

            .btnMenu:focus, .btnMenu:hover {
                color: #333;
            }

        /*===============书的列表==================*/
        .bookListHeader {
            font-size: 32px;
            font-weight: normal;
            color: #303030;
            padding: 10px 0;
            margin: 0;
            text-align: center;
        }

        .bookItem {
            display: block;
            border: 1px solid #e4e1da;
            padding: 0px;
            margin: 10px 0;
            color: #24272c;
            background-color: #f49484;
            color: #fff;
            position: relative;
            height: 120px;
            overflow: hidden;
            transition: all linear 0.5s;
        }

            .bookItem .bookName {
                height: 120px;
                line-height: 120px;
                box-sizing: border-box;
                font-size: 30px;
                font-weight: normal;
                text-align: center;
                margin: 0;
            }

            .bookItem .bookDesc {
                font-size: 14px;
                background-color: rgba(0,0,0,0.7);
                color: #fff;
                position: absolute;
                top: 120px;
                left: 0;
                width: 100%;
                padding: 10px;
                height: 120px;
                box-sizing: border-box;
                overflow: hidden;
                transition: top linear 0.5s;
            }

                .bookItem .bookDesc p {
                    margin: 10px;
                }

            .bookItem:hover {
                color: #fff;
                box-shadow: rgba(0,0,0,0.5) 0 0 10px;
                border-radius: 20px;
            }

                .bookItem:hover .bookDesc {
                    top: 0;
                }

        @media (max-width: 640px) {
            .bookItem {
                height: 80px;
            }

                .bookItem .bookName {
                    height: 80px;
                    line-height: 80px;
                    font-size: 24px;
                }
        }
    </style>
</head>
<body>
    <a class="am-show-sm-only btnMenu">
        <i class="am-icon-home"></i>
    </a>
    <div class="pageBox">
        <div class="nav">
            <div class="nav-menu">
                <a class="home" href="#">
                    <span class="am-icon-home icon"></span>
                    首页
                </a>
                <a href="#">
                    <span class="am-icon-list icon"></span>
                    章节目录
                </a>
            </div>
            <div class="user-history am-margin-top-lg">
                <h3>
                    <span class="am-icon-history icon"></span>
                    浏览历史
                </h3>
                <ul class="am-list">
                    <li>
                        <a href="#">我欲封天-第一章 书生孟浩书生孟浩书生孟浩书生孟浩</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第二章 靠山宗</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第四章 一面铜镜</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第八章 赵武刚</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第十章 王腾飞</a>
                    </li>
                    <li>
                        <a href="#">我欲封天-第十三章 大汉曹阳</a>
                    </li>
                </ul>
            </div>

            <div class="nav-user">
                <a>
                    <span class="am-icon-moon-o icon"></span>
                    显示模式
                </a>
                <a>
                    <span class="am-icon-sign-in icon"></span>
                    登录
                </a>
                <a >
                    <span class="am-icon-sign-in icon"></span>
                    隐藏菜单2
                </a>
            </div>

        </div>
        <div class="ContentBox">
            <div id="chapterBox">
                <div class="chapter">
                    <h1 class="bookListHeader">书库</h1>
                    <div class="am-g">
                        <div class="am-u-sm-12 am-u-md-6">
                            <a href="novelChapterList.html" class="bookItem">
                                <h2 class="bookName">
                                    我欲封天
                                </h2>
                            </a>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <a href="novelChapterList.html" class="bookItem">
                                <h2 class="bookName">
                                    超凡之幸福天眼
                                </h2>
                                <div class="bookDesc">
                                    <p>作者:妖的天空</p>
                                    <p>穿越洪荒成为盘古后嫡大巫刑天，血脉变异、性格狂傲，走出一条属于自己的通天大道！</p>
                                </div>
                            </a>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <a href="novelChapterList.html" class="bookItem">
                                <h2 class="bookName">
                                    幻界超能者
                                </h2>
                                <div class="bookDesc">
                                    <p>作者:妖的天空</p>
                                    <p>穿越洪荒成为盘古后嫡大巫刑天，血脉变异、性格狂傲，走出一条属于自己的通天大道！</p>
                                </div>
                            </a>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6">
                            <a href="novelChapterList.html" class="bookItem">
                                <h2 class="bookName">
                                    神怒之诸神黄昏
                                </h2>
                                <div class="bookDesc">
                                    <p>作者:妖的天空</p>
                                    <p>穿越洪荒成为盘古后嫡大巫刑天，血脉变异、性格狂傲，走出一条属于自己的通天大道！</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>               
            </div>
            
            <div id="loading" class="am-text-center">
                <i class="am-icon-spinner am-icon-spin"></i>
                <p class="am-text-sm am-margin-top-0">努力加载中...</p>
            </div>
        </div>
        <a class="am-btn pagetotop" >
            <span class="am-icon-angle-double-up am-text-lg"></span>
            <p class="am-margin-0 am-text-xs">置顶</p>
        </a>
    </div>
       
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/amazeui.min.js"></script>
    <script>
        $(function () {
            $(".ContentBox").scroll(function () {
                var nowVal = $(".ContentBox").scrollTop();
                var parentHigh = $(".ContentBox").height();
                var boxHigh = $("#chapterBox").height();
                
                //置顶显示
                if (nowVal > 200) {
                    if ($(".pagetotop").is(':hidden')) {
                        $(".pagetotop").show();
                    }

                } else {
                    $(".pagetotop").hide();
                } 
            })
            //置顶按钮
            $(".pagetotop").click(function () {                
                $(".ContentBox").animate({ scrollTop: 0 }, 300);
            })
            //小屏幕时，显示菜单按钮
            $(".btnMenu,.btnMenu2").click(function () {
                $("body").toggleClass("active")
            })

        })


    </script>
</body>
</html>
